<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '配置表单',
  },
}
</route>

<template>
  <view class="page">
    <gi-form ref="GiFormRef" v-model="form" :columns="columns"></gi-form>

    <gi-gap></gi-gap>

    <gi-fixed-footer>
      <sar-button type="mild">保存</sar-button>
      <sar-button type="default" @click="submit">提交</sar-button>
    </gi-fixed-footer>
  </view>
</template>

<script lang="ts" setup>
import type { GiFormInstance } from '@/components/gi-form/type'
import { useFormColumns } from './hooks/useFormColumns'

const form = reactive({
  name: '',
  phone: '',
  num: 2,
  star: 3,
  slider: 10,
  time: '',
  text: '这是只读文本这是只读文本这是只读文本这是只读文本这是只读文本这是只读文本这是只读文本',
  status: true,
})

const GiFormRef = ref<GiFormInstance>()

const { columns } = useFormColumns()

async function submit() {
  try {
    await GiFormRef.value?.formRef.validate()
    uni.showToast({ title: '校验成功', icon: 'none' })
  }
  catch (error) {
    console.log('error', error)
  }
}
</script>

<style lang="scss" scoped>
//
</style>
